<template>
  <div class="app-container">
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="openInfoDialog">添加商品</el-button>
    </el-row>
    <el-table :data="commodityList" border height="600">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="image" label="图片">
        <template slot-scope="scope">
          <img style="height:38px;width:100%;" :src="scope.row.image">
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" :formatter="priceFormater" />
      <el-table-column prop="status" label="状态" :formatter="statusFormater" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="openUpdateDialog(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="5000" />
    <el-dialog :visible.sync="showInfoDialog">
      <commodity-info :commodity.sync="info" @cancel="showInfoDialog=false" @confirm="confirmInfo" />
    </el-dialog>
  </div>
</template>

<script>
import CommodityInfo from './components/commodityInfo'
export default {
  name: 'CommodityList',
  components: {
    CommodityInfo
  },
  data() {
    return {
      name: '商品列表页',
      commodityList: [
        { code: '01', name: 'xxx', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '03', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '04', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '05', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '06', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '07', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '08', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 1 },
        { code: '09', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '10', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 },
        { code: '11', name: 'yyy', image: 'https://www.baidu.com/img/bd_logo1.png', price: 0.01, status: 0 }
      ],
      count: 0,
      info: {},
      statusMap: {
        0: '下架',
        1: '上架'
      },
      showInfoDialog: false
    }
  },
  computed: {
  },
  mounted() {
    console.log('commodity index mounted')
  },
  methods: {
    create() {
      console.log('create')
    },
    indexMethod() {
      return this.count++
    },
    priceFormater(row, col, value, index) {
      return value
    },
    statusFormater(row, col, value, index) {
      var text = this.statusMap[value]
      return text == null ? '错误' : text
    },
    openInfoDialog() {
      this.info = {}
      this.showInfoDialog = true
    },
    openUpdateDialog(data) {
      this.info = data
      this.showInfoDialog = true
    },
    confirmInfo(data) {
    }

  }

}

</script>
<style scoped>
  .wrapper{
    background-color: red;
    width: 100px;
    height: 100px;
  }
</style>
